<template>
  <div>
    <el-tree
      :data="menus"
      :expand-on-click-node="false"
      node-key="catId"
      :props="defaultProps"
      @node-click="nodeClick"
      ref="menuTree"
    ></el-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menus: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  created() {
    this.getAllCategories()
  },
  methods: {
    getAllCategories() {
      this.$http({
        url: this.$http.adornUrl('/product/category/list/tree'),
        method: 'get'
      }).then(({ data }) => {
        this.menus = data.data
      })
    },
    nodeClick(data) {
      if (data.catLevel === 3) {
        this.$emit('categoryNodeClick', data.catId)
      }
    }
  }
}
</script>
